•  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
현재 진행 중인 사용자 토론이 있습니다.
r3
r2
1 [[분류:먼지위키의 도움말]]
r1
2 [include(틀:먼지위키)]
3 [include(틀:공식 문서)]
4 [목차]
5 == 개요 ==
6 먼지위키의 문법 중 응용 문법, 특수한 상황에 적용되는 문법, 난이도가 높은 문법들을 설명합니다. 편집에 필수적으로 필요한 기본 문법들은 [[먼지위키:문법 도움말|상위 문서]]에 안내되어 있으니 심화 문법을 보기 전에 기초 내용을 먼저 숙지하시는 것을 권장합니다.
7
8 == [anchor(텍스트)]응용 텍스트 문법 ==
9 *'''관련 기초 문법''': [[먼지위키:문법 도움말#텍스트|텍스트 기초 문법]] ([[먼지위키:문법 도움말#텍스트 형태|형태]]·[[먼지위키:문법 도움말#텍스트 크기|크기]]·[[먼지위키:문법 도움말#텍스트 색상|색상]])
10
11 === 텍스트 정렬 ===
12 텍스트를 정렬할 수 있으며 형태, 크기, 색상과 병용할 수 있습니다.
13
14 {{{{{{#!wiki style="text-align:center"
15 중앙}}}}}}{{{#!wiki style="text-align:center"
16 ↓}}}{{{#!wiki style="text-align:center"
17 중앙}}}
18 {{{{{{#!wiki style="text-align:left"
19 좌측}}}}}}{{{#!wiki style="text-align:left"
20 ↓}}}{{{#!wiki style="text-align:left"
21 좌측}}}
22 {{{{{{#!wiki style="text-align:right"
23 우측}}}}}}{{{#!wiki style="text-align:right"
24 ↓}}}{{{#!wiki style="text-align:right"
25 우측}}}
26
27 === 텍스트 자간 조절 ===
28 {{{#red '''주의'''}}}: 정식 문법이 아니며 지원 중단 가능성이 있는 비권장 문법입니다.
29
30 {{{{{{#!wiki style="letter-spacing: 값px"
31 텍스트}}}}}}
32 텍스트의 [[자간]]을 조절하여 공간을 절약하거나 가독성을 향상시킬 수 있습니다. 기본값은 0px입니다.
33 [[템플릿]], [[틀]], [[표(자료)|테이블(표)]] 등에서 미관상의 목적으로만 사용하여 주십시오.
34
35 ||<:>출력||<:>입력||
36 ||<:>{{{#!wiki style="letter-spacing: 1.5px"
37 텍스트의 letter-spacing이 1.5px입니다.}}}||<:>{{{{{{#!wiki style="letter-spacing: 1.5px"
38 텍스트의 letter-spacing이 1.5px입니다.}}}}}}||
39 ||<:>{{{#!wiki style="letter-spacing: 1px"
40 텍스트의 letter-spacing이 1.0px입니다.}}}||<:>{{{{{{#!wiki style="letter-spacing: 1px"
41 텍스트의 letter-spacing이 1.0px입니다.}}}}}}||
42 ||<:>{{{#!wiki style="letter-spacing: .5px"
43 텍스트의 letter-spacing이 0.5px입니다.}}}||<:>{{{{{{#!wiki style="letter-spacing: .5px"
44 텍스트의 letter-spacing이 0.5px입니다.}}}}}}||
45 ||<:>{{{#!wiki style="letter-spacing: 0px"
46 텍스트의 letter-spacing이 기본값입니다.}}}||<:>{{{{{{#!wiki style="letter-spacing: 0px"
47 텍스트의 letter-spacing이 기본값입니다.}}}}}}||
48 ||<:>{{{#!wiki style="letter-spacing: -.5px"
49 텍스트의 letter-spacing이 -0.5px입니다.}}}||<:>{{{{{{#!wiki style="letter-spacing: -.5px"
50 텍스트의 letter-spacing이 -0.5px입니다.}}}}}}||
51 ||<:>{{{#!wiki style="letter-spacing: -1.0px"
52 텍스트의 letter-spacing이 -1.0px입니다.}}}||<:>{{{{{{#!wiki style="letter-spacing: -1.0px"
53 텍스트의 letter-spacing이 -1.0px입니다.}}}}}}||
54 ||<:>{{{#!wiki style="letter-spacing: -1.5px"
55 텍스트의 letter-spacing이 -1.5px입니다.}}}||<:>{{{{{{#!wiki style="letter-spacing: -1.5px"
56 텍스트의 letter-spacing이 -1.5px입니다.}}}}}}||
57
58 [[#s-19|HTML 문법]]을 이용할 경우에도 동일하게 적용이 가능합니다.
59 ||{{{ {{{#!html <div style="letter-spacing: 값px">텍스트</div>}}} }}}||
60
61 마음만 먹으면
62 {{{#!wiki style="letter-spacing: 10.0px"
63 이런 것도 가능합니다.}}}
64
65 ----
66 {{{#red '''주의'''}}}: 상기의 경우 외에 문서 본문의 자간을 변경해서는 안됩니다.
67
68 === [anchor(그라데이션)]텍스트 배경 그라데이션 효과 ===
69 {{{#red '''주의'''}}}: 정식 문법이 아니며 지원 중단 가능성이 있는 비권장 문법입니다.
70
71 {{{{{{#!wiki style="background-image: linear-gradient(<to 방향>, #<헥스 코드 1>, #<헥스 코드 2>)"
72 }}}}}}
73 이 문법은 글자의 배경에 [[그라데이션]]을 넣는 기능입니다. (텍스트 뿐만 아니라 테이블의 셀 배경으로 적용 또한 가능함) {{{<헥스 코드 1, 2>}}} 자리에 자신이 넣고 싶은 여섯 자리의 [[헥스 코드]]들을 찾아서 입력해 주세요.
74
75 그러데이션의 여백을 조절하고 싶다면 위 문법에 {{{margin: (세로 여백 조절 숫자)px (가로 여백 조절 숫자)px; }}}을 추가로 입력하여 조절해 주세요.
76
77 그라데이션의 크기를 조절하고 싶다면 위 문법에 {{{padding: (세로 크기 조절 숫자)px (가로 크기 조절 숫자)px; }}}을 추가로 입력하여 조절해 주세요.
78
79 그러데이션의 방향을 설정하고 싶다면 {{{<to 방향>}}} 자리에 to left, to right, to top, to bottom 중에서 하나를 입력해 주세요.
80
81 * 왼쪽에서 오른쪽: {{{to right}}}
82 * 오른쪽에서 왼쪽: {{{to left}}}
83 * 위에서 아래 {{{to bottom}}}
84 * 아래에서 위: {{{to top}}}
85 * 북동쪽 방향 대각선: {{{to top right}}} 또는 {{{to right top}}}
86 * 동남쪽 방향 대각선: {{{to bottom right}}} 또는 {{{to right bottom}}}
87 * 남서쪽 방향 대각선: {{{to bottom left}}} 또는 {{{to left bottom}}}
88 * 북서쪽 방향 대각선: {{{to top left}}} 또는 {{{to left top}}}
89
90 그라데이션의 각도를 세세하게 조절하고 싶다면 {{{<to 방향>}}} 대신 {{{<숫자deg>}}} 문법을 사용해 보세요. {{{숫자}}} 안의 각도 숫자를 자유자재로 조절할 수 있습니다. 아래는 예시입니다.
91 * 북쪽 방향: {{{0deg}}}
92 * 북동쪽 방향: {{{45deg}}}
93 * 동쪽 방향: {{{90deg}}}
94 * 남동쪽 방향: {{{135deg}}}
95 * 남쪽 방향: {{{180deg}}}
96 * 남서쪽 방향: {{{225deg}}}
97 * 서쪽 방향: {{{270deg}}}
98 * 북서쪽 방향: {{{315deg}}}
99
100 상기의 문법을 동시에 사용한 예시입니다.
101 {{{{{{#!wiki style="margin: -5px -10px; padding: 5px 10px; background-image: linear-gradient(to right, #FFB9B9, #FFFDBB)"
102 그라데이션 기능입니다}}}}}}
103 {{{#!wiki style="margin: -5px 0px; padding: 5px 10px; background-image: linear-gradient(to right, #FFB9B9, #FFFDBB)"
104 그라데이션 기능입니다}}}
105
106 또다른 예시입니다.
107
108 {{{{{{#!wiki style="margin: -5px -10px; padding: 5px 10px; background-image: linear-gradient(135deg, #FFB9B9, #FFD3B6, #FFFDBB, #B4ECB4, #ACE1FF, #F6C3FF)"
109 그라데이션 기능입니다
110
111 하하하!
112
113 무지개색 총공격!}}}}}}
114 {{{#!wiki style="margin: -5px 0px; padding: 5px 10px; background-image: linear-gradient(135deg, #FFB9B9, #FFD3B6, #FFFDBB, #B4ECB4, #ACE1FF, #F6C3FF)"
115 그라데이션 기능입니다
116
117 하하하!
118
119 무지개색 총공격!}}}
120
121 [anchor(tablegra)]
122 표 문법 안에 넣어서 활용하는 방법도 있습니다.
123
124 {{{||<width=300px> {{{#!wiki style="margin: -5px -10px; padding: 5px 10px; background-image: linear-gradient(to right, #00A495, #13AD65)"
r3
125 {{{#FFFFFF '''먼지위키'''}}}[br]{{{#FFFFFF '''고유 컬러'''}}}}}} ||}}}
r1
126 ||<width=300px> {{{#!wiki style="margin: -5px -10px; padding: 5px 10px; background-image: linear-gradient(to right, #00A495, #13AD65)"
r3
127 {{{#FFFFFF '''먼지위키'''}}}[br]{{{#FFFFFF '''고유 컬러'''}}}}}} ||
r1
128
129 헥스 코드를 여러번 입력하여 색과 색 사이의 경계를 좀 더 뚜렷하게 만들어 다양한 시도를 할 수 있습니다.
130 {{{||<width=300px> {{{#!wiki style="margin: -5px -10px; padding: 5px 10px; background-image: linear-gradient(to right, #AFEEEE, #AFEEEE, #AFEEEE, #AFEEEE, #4682B4, #4682B4, #4682B4, #4682B4)"
131 {{{#FFFFFF '''안녕하세요'''}}}[br][br][br]{{{#FFFFFF '''여러분'''}}}}}} ||}}}
132 ||<width=300px> {{{#!wiki style="margin: -5px -10px; padding: 5px 10px; background-image: linear-gradient(to right, #AFEEEE, #AFEEEE, #AFEEEE, #AFEEEE, #4682B4, #4682B4, #4682B4, #4682B4)"
133 {{{#FFFFFF '''안녕하세요'''}}}[br]{{{#FFFFFF '''여러분'''}}}}}} ||
134
135 헥스 코드 바로 오른쪽에 퍼센테이지를 붙여서 각 색이 차지하는 크기 및 비율을 조절하는 방법도 있습니다.
136 * {{{linear-gradient(to right, #AFEEEE 65%, #4682B4 80%)"}}}
137 #AFEEEE로 시작하고, 왼쪽에서 65% 지점 이후부터 #4682B4로 전환되기 시작한 후, 왼쪽에서 80% 지점부터 순수한 #4682B4로 완전히 전환되어 종료되는 그라데이션
138 {{{||<width=300px> {{{#!wiki style="margin: -5px -10px; padding: 5px 10px; background-image: linear-gradient(to right, #AFEEEE 65%, #4682B4 80%)"
139 {{{#FFFFFF '''안녕하세요'''}}}[br][br][br]{{{#FFFFFF '''여러분'''}}}}}} ||}}}
140 ||<width=300px> {{{#!wiki style="margin: -5px -10px; padding: 5px 10px; background-image: linear-gradient(to right, #AFEEEE 65%, #4682B4 80%)"
141 {{{#FFFFFF '''안녕하세요'''}}}[br]{{{#FFFFFF '''여러분'''}}}}}} ||
142
143 * {{{linear-gradient(to right, #AFEEEE, #4682B4 60%, #C0D84D)"}}}
144 #AFEEEE로 시작하고, 왼쪽에서 60% 지점부터 순수한 #4682B4로 완전히 전환된 후, #C0D84D로 종료되는 그라데이션
145 {{{||<width=300px> {{{#!wiki style="margin: -5px -10px; padding: 5px 10px; background-image: linear-gradient(to right, #AFEEEE, #4682B4 60%, #C0D84D)"
146 {{{#FFFFFF '''안녕하세요'''}}}[br]{{{#FFFFFF '''여러분'''}}}}}} ||}}}
147 ||<width=300px> {{{#!wiki style="margin: -5px -10px; padding: 5px 10px; background-image: linear-gradient(to right, #AFEEEE, #4682B4 60%, #C0D84D)"
148 {{{#FFFFFF '''안녕하세요'''}}}[br]{{{#FFFFFF '''여러분'''}}}}}} ||
149
150 오른쪽 색상의 지정 위치가 왼쪽 색상보다 작거나 같을 경우, 그라데이션 효과가 사라지고 왼쪽 색상에 지정한 위치에서 색이 나누어집니다.
151 * {{{linear-gradient(to right, #C9151E 30%, #D1EAFF 0%)}}}
152 * {{{linear-gradient(to right, #C9151E 58%, #D1EAFF 57%)}}}
153 * {{{linear-gradient(to right, #C9151E 70%, #D1EAFF 70%)}}}
154 * {{{linear-gradient(45deg, #C9151E 70%, #D1EAFF 70%)}}}
155 ||<width=300px> {{{#!wiki style="margin: -5px -10px; padding:5px; background-image: linear-gradient(to right, #C9151E 30%, #D1EAFF 0%)"
156 {{{#C9151E '''30%'''}}}}}}||
157 || {{{#!wiki style="margin: -5px -10px; padding:5px; background-image: linear-gradient(to right, #C9151E 58%, #D1EAFF 57%)"
158 {{{#C9151E '''58%'''}}}}}}||
159 || {{{#!wiki style="margin: -5px -10px; padding:5px; background-image: linear-gradient(to right, #C9151E 70%, #D1EAFF 70%)"
160 {{{#C9151E '''70%'''}}}}}}||
161 || {{{#!wiki style="margin: -5px -10px; padding:5px; background-image: linear-gradient(45deg, #C9151E 70%, #D1EAFF 70%)"
162 {{{#C9151E '''70%'''}}}}}}||
163
164 서로 다른 방향의 그라데이션을 한 표안에 원할시 linear-gradient(<to 방향>, #<헥스 코드 1>, #<헥스 코드 2>)를 중첩으로 사용해 만들 수 있습니다.
165 {{{||<width=300px> {{{#!wiki style="margin: -5px -10px; padding: 5px 10px; background-image: linear-gradient(to right, #355c7d, #6c5b7b, transparent 50%), linear-gradient(to top, #f8b195, #f67280, #f64d5f)"
166 {{{#fff '''중첩된'''}}}[br]{{{#fff '''그라데이션'''}}}}}} ||}}}
167 ||<width=300px> {{{#!wiki style="margin: -5px -10px; padding: 5px 10px; background-image: linear-gradient(to right, #355c7d, #6c5b7b, transparent 50%), linear-gradient(to top, #f8b195, #f67280, #f64d5f)"
168 {{{#fff '''중첩된'''}}}[br]{{{#fff '''그라데이션'''}}}}}} ||
169 퍼센테이지를 적용할 수 도 있습니다.
170 ||<width=300px> {{{#!wiki style="margin: -5px -10px; padding: 5px 10px; background-image: linear-gradient(to right, #355c7d 25%, #6c5b7b 25%, #6c5b7b 50%, transparent 50%), linear-gradient(to top, #f8b195 33%, #f67280 33%, #f67280 66%, #f64d5f 66%)"
171 {{{#fff '''중첩된'''}}}[br]{{{#fff '''그라데이션'''}}}}}} ||
172
173 반복되는 그라데이션을 원할시 linear-gradient앞에 repeating-을 붙여 구현할 수 있습니다.
174 {{{||<width=300px> {{{#!wiki style="margin: -5px -10px; padding: 5px 10px; background-image: repeating-linear-gradient(45deg, #1f719a 6%, #1f719a 12%, #2abdc3 12%, #2abdc3 18%, #fff6ee 18%, #fff6ee 24%)"
175 {{{#0e284c '''반복 그라데이션'''}}}}}} ||}}}
176 ||<width=300px> {{{#!wiki style="margin: -5px -10px; padding: 5px 10px; background-image: repeating-linear-gradient(45deg, #1f719a 6%, #1f719a 12%, #2abdc3 12%, #2abdc3 18%, #fff6ee 18%, #fff6ee 24%)"
177 {{{#0e284c '''반복 그라데이션'''}}}}}} ||<width=300px> {{{#!wiki style="margin: -5px -10px; padding: 5px 10px; background-image: repeating-linear-gradient(45deg, #1f719a 5%, #1f719a 9%, #2abdc3 9%, #2abdc3 13%, #fff6ee 13%, #fff6ee 17%)"
178 {{{#0e284c '''반복 그라데이션'''}}}}}} ||<width=300px> {{{#!wiki style="margin: -5px -10px; padding: 5px 10px; background-image: repeating-linear-gradient(45deg, #1f719a 2%, #1f719a 4%, #2abdc3 4%, #2abdc3 6%, #fff6ee 6%, #fff6ee 8%)"
179 {{{#0e284c '''반복 그라데이션'''}}}}}} ||
180
181 원 모양의 그라데이션을 원할시 다음과 같이 입력해 출력할 수 있습니다.
182 {{{{{{#!wiki style="background-image: radial-gradient(circle at (위치)% (높이)%, #<헥스 코드 1>, #<헥스 코드 2>)"}}}
183 }}}
184 *위치: 0%일시 원의 중심이 최좌측, 100%일시 원의 중심이 최우측
185 *높이: 0%일시 원의 중심이 최상단, 100%일시 원의 충심이 최하단
186 예시
187 ||<width=300px> {{{#!wiki style="margin: -5px -10px; padding: 5px 10px; background-image: radial-gradient(circle at 50% 50%, #000 50%, #808080 50%)"
188 [br]'''{{{#fff 위치 50%[br]높이 50%[br]크기 50%}}}'''[br][br]}}} ||||<width=300px> {{{#!wiki style="margin: -5px -10px; padding: 5px 10px; background-image: radial-gradient(circle at 0% 50%, #000 50%, #808080 50%)"
189 [br]'''{{{#fff 위치 0%[br]높이 50%[br]크기 50%}}}'''[br][br]}}} ||||<width=300px> {{{#!wiki style="margin: -5px -10px; padding: 5px 10px; background-image: radial-gradient(circle at 50% 0%, #000 50%, #808080 50%)"
190 [br]'''{{{#fff 위치 50%[br]높이 0%[br]크기 50%}}}'''[br][br]}}} ||
191 마찬가지로 위의 linear-gradient와 혼용하여 사용가능합니다.
192 {{{||<width=300px> {{{#!wiki style="margin: -5px -10px; padding: 5px 10px; background-image: radial-gradient(circle at 50% 0%, #000 30%, transparent 30%), linear-gradient(to top, #000, #808080)"
193 [br]'''{{{#fff 위치 50%[br]높이 0%[br]크기 30%}}}'''[br][br]}}} ||
194 }}}
195 ||<width=300px> {{{#!wiki style="margin: -5px -10px; padding: 5px 10px; background-image: radial-gradient(circle at 50% 0%, #000 30%, transparent 30%), linear-gradient(to top, #000, #808080)"
196 [br]'''{{{#fff 위치 50%[br]높이 0%[br]크기 30%}}}'''[br][br]}}} ||
197
198 === 줄바꿈 기준 설정 ===
199 {{{#red '''주의'''}}}: 정식 문법이 아니며 지원 중단 가능성이 있는 비권장 문법입니다.
200
201 문서, 표, 인용문 박스 등 특정 영역의 가장자리에서 텍스트가 줄바꿈 될 때의 기준을 다음 문법을 통해 설정하여 가독성을 향상시킬 수 있습니다.
202 {{{{{{#!wiki style="word-break: (조건값)"
203 }}}}}}
204
205 줄바꿈 조건값으로 입력할 수 있는 값에는 다음이 있습니다.
206 * 띄어쓰기와 하이픈(-)을 단어 구분의 기준으로 '''[[라틴 문자]](로마자)의 단어 단위''' 줄바꿈: {{{normal}}}
207 * 띄어쓰기와 하이픈(-)을 단어 구분의 기준으로 '''모든 문자(한글 포함)의 단어 단위''' 줄바꿈: {{{keep-all}}}
208 * '''글자 단위''' 줄바꿈: {{{break-all}}}
209
210 {{{#red '''참고'''}}}: 이 문법을 따로 사용하지 않았을 경우의 먼지위키 기본값은 글자 단위 줄바꿈({{{word-break: break-all}}}) 입니다.
211 ----
212
213 다음은 예시입니다.
214
215 ||<bgcolor=#fc6><rowcolor=#000>'''{{{word-break: break-all}}} 사용 (먼지위키 기본값, 글자 단위로 줄바꿈)'''||
216 ||{{{|| Out of the frying pan into the fire. 프라이팬이 뜨거워서 밖으로 나가니 불 속이다. || Saying is one thing, doing is another. 말하는 것은 한 가지요, 행동하는 것도 또 다른 한가지다. || The fish always stinks from the head downwards. 생선은 꼭 머리부터 아래쪽으로 썩는 냄새를 풍긴다. || The sparrow near a school sings the primer. 학교 가까이 있는 참새는 입문서를 노래할 수 있다. || The mouse that has but one hole is quickly taken. 구멍 하나만 갖고 있는 쥐는 빨리 잡힌다. || Still waters run deep. 잔잔한 물은 깊이 흐른다. || What's learned in the cradle is carried to the grave. 요람에서 배워진 것이 무덤까지 간다. || You can lead a horse to water, but you can't make him drink. 말을 물가에 데리고 갈 수는 있지만 물을 먹게 할 수는 없다. || There's more than one way to skin a cat. 고양이 가죽 벗기는 데도 한가지 이상의 방법이 있다. || Rome wasn't built in a day. 로마가 하루에 만들어 진 것은 아니다. || One swallow does not make a summer. 제비 한 마리가 여름을 만들지는 않는다. ||}}}||
217
218 ||Out of the frying pan into the fire. 프라이팬이 뜨거워서 밖으로 나가니 불 속이다. || Saying is one thing, doing is another. 말하는 것은 한 가지요, 행동하는 것도 또 다른 한가지다. || The fish always stinks from the head downwards. 생선은 꼭 머리부터 아래쪽으로 썩는 냄새를 풍긴다. || The sparrow near a school sings the primer. 학교 가까이 있는 참새는 입문서를 노래할 수 있다. || The mouse that has but one hole is quickly taken. 구멍 하나만 갖고 있는 쥐는 빨리 잡힌다. || Still waters run deep. 잔잔한 물은 깊이 흐른다. || What's learned in the cradle is carried to the grave. 요람에서 배워진 것이 무덤까지 간다. || You can lead a horse to water, but you can't make him drink. 말을 물가에 데리고 갈 수는 있지만 물을 먹게 할 수는 없다. || There's more than one way to skin a cat. 고양이 가죽 벗기는 데도 한가지 이상의 방법이 있다. || Rome wasn't built in a day. 로마가 하루에 만들어 진 것은 아니다. || One swallow does not make a summer. 제비 한 마리가 여름을 만들지는 않는다.||
219 ----
220
221
222 ||<bgcolor=#fc6><rowcolor=#000><tablewidth=100%>'''{{{word-break: normal}}} 사용 (라틴 문자 단어 단위로 줄바꿈)'''||
223 ||\{{{{{{#!wiki style="word-break: normal"}}}
224 {{{|| Out of the frying pan into the fire. 프라이팬이 뜨거워서 밖으로 나가니 불 속이다. || Saying is one thing, doing is another. 말하는 것은 한 가지요, 행동하는 것도 또 다른 한가지다. || The fish always stinks from the head downwards. 생선은 꼭 머리부터 아래쪽으로 썩는 냄새를 풍긴다. || The sparrow near a school sings the primer. 학교 가까이 있는 참새는 입문서를 노래할 수 있다. || The mouse that has but one hole is quickly taken. 구멍 하나만 갖고 있는 쥐는 빨리 잡힌다. || Still waters run deep. 잔잔한 물은 깊이 흐른다. || What's learned in the cradle is carried to the grave. 요람에서 배워진 것이 무덤까지 간다. || You can lead a horse to water, but you can't make him drink. 말을 물가에 데리고 갈 수는 있지만 물을 먹게 할 수는 없다. || There's more than one way to skin a cat. 고양이 가죽 벗기는 데도 한가지 이상의 방법이 있다. || Rome wasn't built in a day. 로마가 하루에 만들어 진 것은 아니다. || One swallow does not make a summer. 제비 한 마리가 여름을 만들지는 않는다. ||}}}}}}||
225
226 {{{#!wiki style="word-break: normal"
227 || Out of the frying pan into the fire. 프라이팬이 뜨거워서 밖으로 나가니 불 속이다. || Saying is one thing, doing is another. 말하는 것은 한 가지요, 행동하는 것도 또 다른 한가지다. || The fish always stinks from the head downwards. 생선은 꼭 머리부터 아래쪽으로 썩는 냄새를 풍긴다. || The sparrow near a school sings the primer. 학교 가까이 있는 참새는 입문서를 노래할 수 있다. || The mouse that has but one hole is quickly taken. 구멍 하나만 갖고 있는 쥐는 빨리 잡힌다. || Still waters run deep. 잔잔한 물은 깊이 흐른다. || What's learned in the cradle is carried to the grave. 요람에서 배워진 것이 무덤까지 간다. || You can lead a horse to water, but you can't make him drink. 말을 물가에 데리고 갈 수는 있지만 물을 먹게 할 수는 없다. || There's more than one way to skin a cat. 고양이 가죽 벗기는 데도 한가지 이상의 방법이 있다. || Rome wasn't built in a day. 로마가 하루에 만들어 진 것은 아니다. || One swallow does not make a summer. 제비 한 마리가 여름을 만들지는 않는다. ||}}}
228 ----
229
230
231 ||<bgcolor=#fc6><rowcolor=#000>'''{{{word-break: keep-all}}} 사용 (한글을 포함한 모든 문자의 단어 단위로 줄바꿈)'''||
232 ||\{{{{{{#!wiki style="word-break: keep-all"}}}
233 {{{|| Out of the frying pan into the fire. 프라이팬이 뜨거워서 밖으로 나가니 불 속이다. || Saying is one thing, doing is another. 말하는 것은 한 가지요, 행동하는 것도 또 다른 한가지다. || The fish always stinks from the head downwards. 생선은 꼭 머리부터 아래쪽으로 썩는 냄새를 풍긴다. || The sparrow near a school sings the primer. 학교 가까이 있는 참새는 입문서를 노래할 수 있다. || The mouse that has but one hole is quickly taken. 구멍 하나만 갖고 있는 쥐는 빨리 잡힌다. || Still waters run deep. 잔잔한 물은 깊이 흐른다. || What's learned in the cradle is carried to the grave. 요람에서 배워진 것이 무덤까지 간다. || You can lead a horse to water, but you can't make him drink. 말을 물가에 데리고 갈 수는 있지만 물을 먹게 할 수는 없다. || There's more than one way to skin a cat. 고양이 가죽 벗기는 데도 한가지 이상의 방법이 있다. || Rome wasn't built in a day. 로마가 하루에 만들어 진 것은 아니다. || One swallow does not make a summer. 제비 한 마리가 여름을 만들지는 않는다. ||}}}}}}||
234
235 {{{#!wiki style="word-break: keep-all"
236 || Out of the frying pan into the fire. 프라이팬이 뜨거워서 밖으로 나가니 불 속이다. || Saying is one thing, doing is another. 말하는 것은 한 가지요, 행동하는 것도 또 다른 한가지다. || The fish always stinks from the head downwards. 생선은 꼭 머리부터 아래쪽으로 썩는 냄새를 풍긴다. || The sparrow near a school sings the primer. 학교 가까이 있는 참새는 입문서를 노래할 수 있다. || The mouse that has but one hole is quickly taken. 구멍 하나만 갖고 있는 쥐는 빨리 잡힌다. || Still waters run deep. 잔잔한 물은 깊이 흐른다. || What's learned in the cradle is carried to the grave. 요람에서 배워진 것이 무덤까지 간다. || You can lead a horse to water, but you can't make him drink. 말을 물가에 데리고 갈 수는 있지만 물을 먹게 할 수는 없다. || There's more than one way to skin a cat. 고양이 가죽 벗기는 데도 한가지 이상의 방법이 있다. || Rome wasn't built in a day. 로마가 하루에 만들어 진 것은 아니다. || One swallow does not make a summer. 제비 한 마리가 여름을 만들지는 않는다. ||}}}
237
238 === [[마크업 언어]]가 적용되지 않는 텍스트 ===
239 일반 텍스트 사이에 코드를 넣거나, 해당 텍스트에 [[마크업 언어|마크업]]이 적용되지 않도록 할 수 있습니다.[* 마크업 언어에 관한 설명은 해당 문서 참조. 프로그래밍과 거리가 먼 사람이라 이해가 가지 않으신다면, 위키 한정으로는 그냥 "위키 문법이 미적용된다"고 이해하셔도 좋습니다.]
240
241 || {{{{{{코드, 또는 텍스트}}}}}} ||
242
243 {{{{{{ 와 }}}}}}안에 들어간 텍스트는 마크업이 적용되지 않고, {{{이렇게 고정폭 글꼴}}}로 표시됩니다. 텍스트 사이에 코드를 넣는 경우나 이 문법 도움말 문서처럼 특정 마크업을 설명할 때 사용됩니다.
244 ----
r3
245 '''{{{#red 주의}}}''': 기술적인 문제로 인해 {{{"{{{" 와 "}}}"}}} 사이에 {{{ "{" }}} 또는 {{{ "}" }}}를 3개 이상 연속으로 사용할 수 없습니다. {{{ { }}}, {{{ {{ }}}, {{{ } }}}, {{{ }} }}}는 정상적으로 출력되며, 사이에 띄어쓰기가 있는 경우에도 정상적으로 출력됩니다. 다만 중괄호를 열고 닫는 것이 짝이 맞는 경우엔 작동합니다. [[https://namu.wiki/w/먼지위키:보존문서/먼지위키:연습장1?rev=4128|시연]]
r1
246
247 '''{{{#green 참고}}}''': 한 문자에만 마크업을 적용되지 않게 하려면 그 문자 바로 앞에 \\(역슬래시)를 넣으면 됩니다. [[../#문법 무효화|문법 도움말 기본편 참조]].
248
249 == 하이퍼링크 ==
250 *'''관련 기초 문법''': [[먼지위키:문법 도움말#하이퍼링크|하이퍼링크 기초 문법]]
251 === [anchor(앵커)]앵커(anchor) ===
252 [anchor(앵커 리다이렉트)]{{{[anchor()]}}}문법을 사용하면 현재 문서 또는 다른 문서의 임의의 위치로 하이퍼링크를 걸 수 있습니다.
253
254 우선, 먼저 해야 할 일은 링크를 걸어 이동시키고자 하는 현재 문서 또는 다른 문서의 특정 위치(도착점)에 앵커를 삽입하는 것입니다. 링크를 보내고자 하는 곳에 아래와 같이 앵커를 넣어줍니다.
255 [anchor(아무개)] 예시) {{{[anchor(아무개)]}}}
256
257 그 다음 링크를 걸 곳(출발점)에는 아래와 같은 방법으로 링크를 만들어주시면 됩니다. 문단 링크 문법과는 #뒤에 's-문단명' 대신 앵커 이름이 온다는 점만 다릅니다.
258 ||<rowbgcolor=#fc6><rowcolor=#000> 사용법 || 출력 || 설명 ||
259 ||{{{[[먼지위키:문법 도움말/심화#아무개]]}}}||[[먼지위키:문법 도움말/심화#아무개]]||<|2>특정 문서의 해당 앵커가 있는 위치로 하이퍼링크를 겁니다.||
260 ||{{{[[먼지위키:문법 도움말/심화#아무개|먼지위키:문법 도움말/심화#아무개]]}}}||[[먼지위키:문법 도움말/심화#아무개|먼지위키:문법 도움말/심화#아무개]]||||
261 ||{{{[[#아무개]]}}}||[[#아무개]]||같은 문서 내의 해당 앵커가 있는 위치로 하이퍼링크를 겁니다.||
262 ||{{{[[먼지위키:문법 도움말/심화#아무개|물론 링크와 출력이 서로 다르게 할 수도 있습니다.]]}}}||[[먼지위키:문법 도움말/심화#아무개|물론 링크와 출력이 서로 다르게 할 수도 있습니다.]]||<|2>링크와 출력이 서로 다른 앵커 문법입니다.||
263 ||{{{[[#아무개|나아가 같은 문서로도요.]]}}}||[[#아무개|나아가 같은 문서로도요.]]||
264
265 한편, 특정한 위치에 자동으로 생성되는 앵커도 있습니다.
266 *모든 문서의 맨 위에는 top 앵커가 있습니다. {{{[[문서명#top]]}}}을 사용하면 해당 문서의 제일 위로 이동하는 링크가 생깁니다. 예시: [[먼지위키:문법 도움말/심화#top|먼지위키:문법 도움말/심화#top]]
267 *모든 문서의 맨 아래에는 bottom 앵커가 있습니다. {{{[[문서명#bottom]]}}}을 사용하면 해당 문서의 제일 아래로 이동하는 링크가 생깁니다. 예시: [[먼지위키:문법 도움말/심화#bottom|먼지위키:문법 도움말/심화#bottom]]
268 *모든 목차에는 toc 앵커가 있습니다. {{{[[문서명#toc]]}}}을 사용하면 해당 문서의 목차로 이동하는 링크가 생깁니다. 예시: [[먼지위키:문법 도움말/심화#toc|먼지위키:문법 도움말/심화#toc]]
269 *모든 문단에는 s-문단번호 앵커와 문단이름 앵커가 있습니다. {{{[[문서명#s-n]]}}}을 사용하면 해당 문서의 n번째 문단으로 이동하는 링크가 생깁니다. 또한 {{{[[문서명#문단 이름]]}}}을 사용하면 해당 문서의 해당 문단으로 이동하는 링크가 생깁니다. 문단을 추가하거나 삭제하면 문단번호가 변화하니 문단번호 앵커는 쉽게 변할 수 있습니다. 그러나 문단이름은 변하는 경우가 상대적으로 적어 더 안정적입니다. 물론 문단이름도 변할 수 있어서 완전한 것은 아닙니다. 예시: [[먼지위키:문법 도움말/심화#s-1|먼지위키:문법 도움말/심화#s-1]], [[먼지위키:문법 도움말/심화#개요|먼지위키:문법 도움말/심화#개요]]
270 *모든 각주에는 fn-각주번호 또는 fn-각주이름 앵커가 있습니다. {{{[[문서명#fn-n]]}}}을 사용하면 해당 문서의 n번째 각주로 이동하는 링크가 생기고, {{{[[문서명#fn-A]]}}}을 사용하면 해당 문서의 A라는 각주로 이동하는 링크가 생깁니다. 예시: [[먼지위키:문법 도움말/심화#fn-1|먼지위키:문법 도움말/심화#fn-1]], [[먼지위키:문법 도움말/심화#fn-A|먼지위키:문법 도움말/심화#fn-A]]
271 *모든 각주가 삽입된 본문에는 rfn-각주번호 앵커가 있습니다. {{{[[문서명#rfn-n]]}}}을 사용하면 해당 문서의 n번째 각주가 삽입된 곳으로 이동하는 링크가 생깁니다. 여기에는 각주번호가 아닌 각주이름은 사용할 수 없습니다. 예시: [[먼지위키:문법 도움말/심화#rfn-1|먼지위키:문법 도움말/심화#rfn-1]], [[먼지위키:문법 도움말/심화#rfn-20|먼지위키:문법 도움말/심화#rfn-20]]
272
273 단, 먼지위키 [[스킨 설정]]에서 '고정형 내비게이션 바'를 사용하는 경우 해당 기능 특성상 앵커 이동 위치의 내용이 가려지는 현상이 발생합니다.
274 [*A 각주이름 앵커]
275
276 === [anchor(하이퍼링크 시 주의)]|, \\, #가 제목에 쓰이거나 제목이 ]로 끝나거나 제목이 /로 시작하는 문서로 하이퍼링크 걸기 ===
277 기술적인 문제로 일반적인 하이퍼링크 문법으로는 해당 문서로 통하는 정상적인 하이퍼링크를 만들 수 없습니다. 이럴 때는 해당 문자 앞에 \\를 넣어 줘야 합니다. #나 맨 끝의 ]가 제목에 들어간 문서에 한해서 맨 끝에 #를 넣어 줘도 됩니다. 다른 편집자를 위해서 [[틀:링크시 주의]]를 달아 줘도 됩니다. 해당 틀을 작성할 때 위키 문법상 \\를 3개 더 입력해야 안내문에 \\가 정상적으로 출력이 되니 유의하십시오.
278
279 단, /는 예외적으로 \\를 앞에 입력해도 정상 출력이 안 됩니다. 이때는 링크를 걸려는 쪽의[* A 문서에서 B 문서로 향하는 링크를 걸 경우, A 문서가 이에 해당합니다.] 문서의 제목에 /가 없다면 {{{[[../문서명]]}}}을 사용하십시오.
280
281 링크를 걸려는 쪽의 문서 제목에 /가 있을 경우에는 (슬래시(/) 개수+1)개만큼 ../를 써주시고 문서명을 붙이시면 됩니다. 그러나 이 경우 정상적으로 링크되지만 빨간 링크가 걸리므로, 색상 문법을 이용해서 #0275D8,#EC9F19의 색을 넣어주시면 정상 색으로 나옵니다.
282
283 혹은 모양이 비슷한 전각 문자(#, /, \, |, ])로 리다이렉트하셔도 됩니다. 전각 문자가 아니더라도 해당 문서의 리다이렉트 문서를 사용하실 수도 있습니다.
284
285 ||||<rowbgcolor=#fc6><rowcolor=#000><tablealign=center> 예시 ||
286 ||<rowbgcolor=#fc6><rowcolor=#000> 입력 || 출력 ||
287 || {{{ [[\\]] }}} || [[\\]] ||
288 || {{{[[Fate/Grand Order/서번트/랜서/블라드 3세[EXTRA\]]]}}} || [[Fate/Grand Order/서번트/랜서/블라드 3세[EXTRA\]]] ||
289 || {{{[[\#1 To Infinity]]}}} || [[\#1 To Infinity]] ||
290 || {{{[[#1 To Infinity#s-2]]}}}[* 이 경우 2번 문단으로 링크가 걸립니다.] || [[#1 To Infinity#s-2]] ||
291 || {{{[[S\#ARP]]}}} || [[S\#ARP]] ||
292 || {{{[[S#ARP#]]}}} || [[S#ARP#]] ||
293 || {{{[[a(4chan)|/a/]]}}}[* [[a(4chan)]] 문서가 [[a(4chan)|/a/]] 문서로 리다이렉트됩니다.] || [[a(4chan)|/a/]] ||
294 || (4chan/게시판 문서에서 링크를 걸 경우) {{{[[../..//b/|{{{#0275D8,#EC9F19 /b/]]}}}}}} || [[..//a/|/a/]] ||
295
296
297 == 들여쓰기 ==
298 텍스트를 들여쓰고자 할 경우, 줄 앞에 띄어쓰기(공백)을 하나 이상 입력합니다. 들여쓴 텍스트 내에서 또 들여쓰고자 할 경우, 입력했던 공백보다 더 많은 공백을 입력합니다.
299 '''{{{#red 주의}}}''': 들여쓴 단계에 따라 줄 앞에 입력한 공백의 개수는 일정하게 유지해주십시오.
300
301 ||<-2>붉은 {{{#red v}}}는 띄어쓰기를 나타냅니다.||
302 ||<^|1><width=200px>입력
303 ----
304 들여쓰지 않은 텍스트
305 {{{#red v}}}들여쓴 텍스트 (단계 1)
306 {{{#red vv}}}들여쓴 텍스트 (단계 2)
307 {{{#red vvv}}}들여쓴 텍스트 (단계 3)
308 {{{#red v}}}들여쓴 텍스트 (단계 1)
309 들여쓰지 않은 텍스트
310 ||<^|1><width=300px>출력
311 ----
312 {{{#!wiki style="padding-left:10px; margin-bottom:16px"
313 들여쓰지 않은 텍스트}}}{{{#!wiki style="padding-left:20px; margin-bottom:16px"
314 들여쓴 텍스트 (단계 1)}}}{{{#!wiki style="padding-left:30px; margin-bottom:16px"
315 들여쓴 텍스트 (단계 2)}}}{{{#!wiki style="padding-left:40px; margin-bottom:16px"
316 들여쓴 텍스트 (단계 3)}}}{{{#!wiki style="padding-left:20px; margin-bottom:16px"
317 들여쓴 텍스트 (단계 1)}}}{{{#!wiki style="padding-left:10px; margin-bottom:16px"
318 들여쓰지 않은 텍스트}}}
319 ||
320 다른 단계의 들여쓰기는 서로 다른 문단으로 여기게 되어 가로로 들여쓰기가 됨과 동시에 문단끼리 세로 여백이 생기게 됩니다.
321
322 == 인용문 ==
323 ----
324 {{{+1 '''인용문의 정렬'''}}}
325 인용문은 기본적으로 왼쪽 정렬이며 오른쪽이나 가운데 정렬을 하고 싶다면 틀 안에 넣고 그 틀을 정렬하는 방식으로 가능합니다. 표에 넣고 그 표를 정렬하는 식은 버그가 있는데, 아래 버그 부분을 참고.
326
327 {{{#!wiki style="float:left;padding-right:10px;margin-right:10px;border-right:1px solid lightgray;width:200px"
328 입력
329 ----
330 {{{> 기본 좌측
331
332 {{{#!wiki style="margin:0px auto;display:table"
333 > 가운데}}}
334
335 {{{#!wiki style="float:right"
336 > 우측}}}[clearfix]}}}[br] [br] [br] }}}{{{#!wiki style="width:calc(100%-230px)"
337 출력
338 ----
339 > 기본 좌측
340 {{{#!wiki style="margin:0px auto;display:table"
341 > 가운데}}}
342 {{{#!wiki style="float:right"
343 > 우측
344 }}}[clearfix]}}}
345
346 ----
347 {{{+1 '''표 안의 인용문'''}}}
348 '''{{{#red 주의}}}''': 2020년 2월 현재, 표 내부에서 인용문 문법을 사용하면 폭 구현이 제대로 안되는 버그가 있습니다. 아래와 같이 인용문 안에 강제로 여백을 넣는 틀을 사용하고 내용을 입력하는 식으로 임시적인 해결은 가능합니다.
349
350 ##
351 ## 2020년 5월 현재, 마이크로소프트 에지, 모질라 파이어폭스, 삼성 인터넷 구현 확인.
352 ##
353 ||<rowbgcolor=#fc6><rowcolor=#000> 입력 ||<width=150px> 출력 ||
354 ||표 안에 그냥 인용문을 넣을 경우
355 {{{> 인용문
356 }}}||<^|1>아래와 같이 점선 안이 쪼그라 듦.
357 >인용문||
358 ||여백을 주는 틀을 이용하는 경우.
359 {{{#!folding  [ 문법 보기, 접기 ] 
360 margin은 padding과 바꾸어도 동일한 결과.
361 값(1em calc(2em + 25px) 1em 1em)은 2020년 5월 현재 먼지위키 엔진의 값.
362 {{{>{{{#!wiki style="margin:1em calc(2em + 25px) 1em 1em"
363 인용문}}}}}}}}}
364 ||<width=150px><^|1>
365 >{{{#!wiki style="margin:1em calc(2em + 25px) 1em 1em"
366 인용문}}}||
367
368 == 주석 ==
369 위키 문서 내에 출력되지 않는, 편집자만 읽을 수 있는 주석을 달 수 있습니다. 줄 시작시 {{{##}}}를 입력하고 내용을 적습니다. 그 줄에 해당하는 내용은 출력시 없는 줄로 처리됩니다.
370
371 편집자의 실수로 인한 잘못된 수정이 잦을 경우, 대상의 근처에 넣으면 좋습니다.
372
373 ||<table bordercolor=gray><width=300px><rowbgcolor=#fc6><rowcolor=#000> 입력 ||<width=300px> 출력 ||
374 ||{{{
375 ## 내용}}} || ||
376 ||{{{## 주석입니다.
377 가나다라
378 ## 주석은 페이지에 출력되지 않습니다.
379 마바사아
380 ## 토론에서도 주석이 적용됩니다.
381 자차카타}}}||<^|1>가나다라
382 마바사아
383 자차카타
384 ||
385
386 '''{{{#red 버그}}}''' 편집기에서 ##의 앞에 한 칸 이상 띄워져 있으면 출력은 안되지만 편집기 상에서는 적용 사항인 것처럼 초록색으로 표시됩니다. 궁금하다면 이 문단의 편집 버튼을 눌러보세요.
387
388 == 매크로 ==
389 *'''관련 기초 문법''': [[먼지위키:문법 도움말#매크로|매크로 기초 문법]] (date/datetime, br, include, table of contents(목차), footnote(각주), age(나이), dday(남은 날))
390 === pagecount ===
391 {{{[pagecount]}}} 로 호출할 수 있습니다. 해당 위치에 먼지위키에 존재하는 문서 개수를 출력합니다. 정수값으로 출력됩니다.
392
393 === [anchor(루비)][[루비 문자]](ruby) ===
394 루비 문자를 입력합니다.
395
396 예시
397 || {{{ [ruby(글자,ruby=루비,color=red)] }}} ||
398 || [ruby(글자,ruby=루비,color=red)] ||
399
400 == [anchor(테이블)]테이블 응용 문법 ==
401 *'''관련 기초 문법''': [[먼지위키:문법 도움말#테이블|테이블 기초 문법]] (기본 형태, 가로 세로 합치기, 테이블과 셀 꾸미기)
402 === 테이블 캡션 ===
403 테이블에 캡션을 달 수 있습니다.
404
405 {{{
406 |캡션| 테이블 || 내용 ||
407 }}}
408
409 |캡션| 테이블 || 내용 ||
410
411 테이블의 첫 셀을 구성하는 {{{|}}} 와 {{{|}}} 사이에 캡션을 입력합니다.
412
413 텍스트 뿐만 아니라 이미지나 동영상을 캡션으로 넣을 수도 있습니다.
414
415 '''{{{#red 주의}}}''': 캡션 내에서 {{{[[내용|출력]]}}} 형태 링크를 쓰면 문법이 깨질 수 있습니다. 또한 2019년 2월 현재 편집 중 미리보기를 할 때는 캡션이 회색으로 보이며 표 위가 아닌 밑으로 내려오는 버그가 존재합니다.
416 '''{{{#red 주의}}}''': 이미지와 동영상의 경우, '''border를 포함한''' 테이블의 width이 이미지나 동영상의 width(youtube 영상은 기본 640) 이상이여야 영상이 짤리지 않습니다.
417
418 === 이미지 / 동영상 삽입 시 기본 셀 여백 제거 ===
419 {{{#red '''주의'''}}}: 정식 문법이 아니며 '''지원 중단 가능성이 있는 비권장 문법'''입니다.
420
421 이미지 또는 동영상과 같은 컨텐츠를 셀 안에 삽입할 때 생기는 상하 5px, 좌우 10px의 기본 셀 여백을 다음 문법을 이용해 제거할 수 있습니다.
422 {{{{{{#!wiki style="margin: -5px -10px"
423 }}}}}}
424 -10px"까지 쓰고 '''반드시 줄을 바꿔줘야''' 합니다.
425 가끔씩 상하에 '''-4px의''' 기본 여백을 제거해야되는 경우도 있습니다.
426 ----
427 아래는 예시입니다.
428
429 ||{{{||<width=500><table align=center><table bordercolor=red><table bgcolor=yellow>[[파일:먼지위키 로고2.png|width=100%&align=center]]||}}}[br][br]문법을 적용하지 않은 이미지.[br]테두리(빨간색) 안에 상하 5px, 좌우 10px의 기본 여백(노란색) 발생.||
430
431 ||<width=500><table align=center><table bordercolor=red><table bgcolor=yellow>[[파일:먼지위키 로고2.png|width=100%&align=center]]||
432
433 ----
434
435 ||{{{||<width=500><table align=center><table bordercolor=red><table bgcolor=yellow>{{{#!wiki style="margin: -5px -10px"
436 [[파일:먼지위키 로고2.png|width=100%&align=center]]}}}||}}}[br]문법을 적용한 후.||
437
438 ||<width=500><table align=center><table bordercolor=red><table bgcolor=yellow>{{{#!wiki style="margin: -5px -10px"
439 [[파일:먼지위키 로고2.png|width=100%&align=center]]}}}||
440
441 ----
442
443 ||{{{||<width=500><table align=center><table bordercolor=red><table bgcolor=yellow>{{{#!wiki style="margin: -5px -10px"
444 [youtube(jNQXAC9IVRw)]}}}||}}}[br]동영상에 적용.||
445
446 ||<width=500><table align=center><table bordercolor=red><table bgcolor=yellow>{{{#!wiki style="margin: -5px -10px"
447 [youtube(jNQXAC9IVRw)]}}}||
448
449 == [anchor(접기)]접기의 응용 ==
450 *'''관련 기초 문법''': [[먼지위키:문법 도움말#접기|접기 기초 문법]]
451
452 * {{{+1 '''응용 1'''}}}
453 표 안에 넣으면서 접기 문법 외부의 여백이 없는 것처럼 보이게 합니다.
454 ||<colbgcolor=#fc6><colcolor=#000>문법||{{{#!folding [ 문법 펼치기 · 접기 ]
455 {{{{{{#!wiki style="text-align:center; border: 2px solid #000; background-color:#00A; margin:0 auto; display:table"
456 {{{#!wiki style="padding:5px"
457 '''{{{#white 제목}}}'''}}}{{{#!wiki style="background-color:#FFF;color:#120800"
458 {{{#!folding [ 펼치기 · 접기 ]
459 내용내용내용내용내용내용내용내용
460 내용내용내용내용내용내용내용내용}}}}}}}}}}}}}}}||
461 || 결과 ||{{{#!wiki style="text-align:center; border: 2px solid #000; background-color:#00A; margin:0 auto; display:table"
462 {{{#!wiki style="padding:5px"
463 '''{{{#white 제목 }}}'''}}}{{{#!wiki style="background-color:#FFF;color:#120800"
464 {{{#!folding [ 펼치기 · 접기 ]
465 내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용}}}}}}}}}||
466
467 * {{{+1 '''응용 2'''}}}
468 한 틀에 여러 틀을 합쳐 넣을 수 있습니다.
469 ||<colbgcolor=#fc6><colcolor=#000> 문법 ||'''{{{#red 주의}}}''': 틀 안의 내용이 충분히 커야 합니다.
470 {{{#!folding [ 문법 펼치기 · 접기 ]
471 {{{{{{#!wiki style="text-align:center; border: 2px solid #000; background-color:#00A; margin:0 auto; width:200px; display:table"
472 {{{#!wiki style="padding:5px"
473 '''{{{#white 제목}}}'''}}}{{{#!wiki style="background-color:#FFF"
474 {{{#!wiki style="margin:0 5px; display:inline-block"
475 {{{#!folding [ 틀 1 ]
476 틀 1 내용 틀 1 내용 틀 1 내용 틀 1 내용 틀 1 내용}}}}}}{{{#!wiki style="margin:0 5px; display:inline-block"
477 {{{#!folding [ 틀 2 ]
478 틀 2 내용 틀 2 내용 틀 2 내용 틀 2 내용 틀 2 내용}}}}}}{{{#!wiki style="margin:0 5px; display:inline-block"
479 {{{#!folding [ 틀 3 ]
480 틀 3 내용 틀 3 내용 틀 3 내용 틀 3 내용 틀 3 내용}}}}}}}}}}}}}}}}}}||
481 || 결과 ||{{{#!wiki style="text-align:center; border: 2px solid #000; background-color:#00A; margin:0 auto; width:200px; display:table"
482 {{{#!wiki style="padding:5px"
483 '''{{{#white 제목}}}'''}}}{{{#!wiki style="background-color:#FFF;color:#120800"
484 {{{#!wiki style="margin:0 5px; display:inline-block"
485 {{{#!folding [ 틀 1 ]
486 틀 1 내용 틀 1 내용 틀 1 내용 틀 1 내용 틀 1 내용}}}}}}{{{#!wiki style="margin:0 5px; display:inline-block"
487 {{{#!folding [ 틀 2 ]
488 틀 2 내용 틀 2 내용 틀 2 내용 틀 2 내용 틀 2 내용}}}}}}{{{#!wiki style="margin:0 5px; display:inline-block"
489 {{{#!folding [ 틀 3 ]
490 틀 3 내용 틀 3 내용 틀 3 내용 틀 3 내용 틀 3 내용}}}}}}}}}}}}||
491
492 * {{{+1 '''응용 3'''}}}
493 표 내에 폴딩을 이용해 표를 추가로 넣으면서 여백을 제거할 수 있습니다.
494 ||<colbgcolor=#fc6><colcolor=#000><|3> 문법 ||{{{#!folding [ 문법 펼치기 · 접기 ]
495 {{{|| {{{#!wiki style="margin:0 -10px"
496 {{{#!folding [ 펼치기 · 접기 ]
497 {{{#!wiki style="margin:-6px -1px"
498 ||내용내용내용내용내용내용내용내용||
499 ||내용내용내용내용내용내용내용내용||}}}}}}}}} ||}}}}}}||
500 ||내부 테이블 하단과 접기 문법을 적용한 셀의 배경색이 같은 경우에는 하단 여백도 제거할 수 있습니다.{{{#!folding [ 문법 펼치기 · 접기 ]
501 {{{|| {{{#!wiki style="margin:0 -10px"
502 {{{#!folding [ 펼치기 · 접기 ]
503 {{{#!wiki style="margin:-6px -1px -16px"
504 ||내용내용내용내용내용내용내용내용||
505 ||내용내용내용내용내용내용내용내용||}}}}}}}}} ||}}}}}}||
506 ||내부 테이블 하단과 접기 문법을 적용한 셀의 배경색이 다른 경우에는 조금 더 복잡한 문법이 필요합니다.{{{#!folding [ 문법 펼치기 · 접기 ]
507 {{{||<^|1><height=32> {{{#!wiki style="margin:0 -10px -5px"
508 {{{#!folding [ 펼치기 · 접기 ]
509 {{{#!wiki style="margin:-6px -1px -11px"
510 ||내용내용내용내용내용내용내용내용||
511 ||내용내용내용내용내용내용내용내용||}}}}}}}}} ||}}}}}}||
512 || 결과 ||{{{#!wiki
513 ||<-4><tablebgcolor=#fff,#000> 결과 ||
514 || 여백 제거 적용 || 하단 여백 제거 적용 || 하단 여백 제거(2) 적용 || 여백 제거 미적용 ||
515 || {{{#!wiki style="margin:0 -10px"
516 {{{#!folding [ 펼치기 · 접기 ]
517 {{{#!wiki style="margin:-6px -1px -10px"
518 ||내용내용내용내용내용내용내용내용||
519 ||내용내용내용내용내용내용내용내용||}}}}}}}}} ||<bgcolor=#f5f5f5,#2d2f34> {{{#!wiki style="margin:0 -11px"
520 {{{#!folding [ 펼치기 · 접기 ]
521 {{{#!wiki style="margin:-6px -1px -16px"
522 ||내용내용내용내용내용내용내용내용||
523 ||내용내용내용내용내용내용내용내용||}}}}}}}}} ||<^|1><height=32> {{{#!wiki style="margin:0 -10px -5px"
524 {{{#!folding [ 펼치기 · 접기 ]
525 {{{#!wiki style="margin:-6px -1px -11px"
526 ||내용내용내용내용내용내용내용내용||
527 ||내용내용내용내용내용내용내용내용||}}}}}}}}} || {{{#!folding [ 펼치기 · 접기 ]
528 || 내용내용내용내용내용내용내용내용 ||
529 || 내용내용내용내용내용내용내용내용 ||}}} ||}}}||
530
r3
531 == HTML ==
532 '''{{{+2 {{{#red 이 문법은 권장되지 않으며 차후에 지원이 종료될 수 있습니다.}}}}}}'''
r1
533
r3
534 이 문서는 먼지위키에서 작동하는 [[HTML]]을 다룹니다. 위에도 적혀 있듯이 비권장 문법이니 남용하지는 말아주세요. 웬만한 html 문법은 다음과 같은 문법으로 대체가 가능하오니 가급적 대체문법을 이용해주시기 바랍니다.
535 || 문법 ||{{{{{{#!html <div style="css-property: value;">먼지위키, 여러분이 가꾸어 나가는 지식의 나무</div>}}}
536 }}}||
537 || 출력 ||{{{#!html <div style="css-property: value;">먼지위키, 여러분이 가꾸어 나가는 지식의 나무</div>}}}||
538 ||<-2> HTML 문법 ||
539 || 문법 ||{{{{{{#!wiki style="css-property: value;"
540 먼지위키, 여러분이 가꾸어 나가는 지식의 나무}}}}}}||
541 || 출력 ||{{{#!wiki style="css-property: value;"
542 먼지위키, 여러분이 가꾸어 나가는 지식의 나무}}}||
543 ||<-2> 대체 문법 ||
r1
544
r3
545 == [anchor(텍스트)]HTML 문법을 이용한 텍스트 효과 ==
546 === 텍스트 배경 색상 사용 ===
547 {{{ {{{#!html <span style="background-color: #배경색">서술할 내용</span>}}} }}}
r1
548
r3
549 아래 표의 예시는 비교를 위하여 원본과 3배본을 함께 서술하였습니다.
550 ||{{{{{{#!html <span style="background-color: #999">배경색 적용</span>}}}}}}
551 글자가 있는 부분(공백 포함)에만 배경색이 적용됩니다.
552 ||<bgcolor=#ffffff> {{{#!html <span style="background-color: #999">배경색 적용</span>}}} {{{#!html <span style="background-color: #999; font-weight:700; font-size:300%">배경색 적용</span>}}} ||
553 [[틀:글배경]], [[틀:글배경b]], [[틀:글배경r]], [[틀:글배경br]]을 이용할 수도 있습니다.
r1
554
r3
555 ==== 텍스트 배경 색상과 텍스트 색깔 중첩 사용 ====
556 {{{#!html <span style="background-color: #EFEF00">서술할 내용1</span>}}}
557 {{{#!html <span style="color: #00AA00">서술할 내용2</span>}}}
558 {{{#!html <span style="color: #FFFFFF; background-color: #00AEE3">서술할 내용3</span>}}}
r1
559
r3
560 ||{{{{{{#!html <span style="background-color: #배경색">서술할 내용1</span>}}}}}}
561 {{{{{{#!html <span style="color: #글자색">서술할 내용2</span>}}}}}}
562 {{{{{{#!html <span style="color: #글자색; background-color: #배경색">서술할 내용3</span>}}}}}}||
r1
563
r3
564 HTML 문법을 제대로 적지 않으면 평범한 글자가 됩니다. 중첩을 사용할 때 [[쌍반점|;(세미콜론)]] 뒤에 한 칸을 띄어 쓰면 됩니다. 이를 응용하여 다른 문법에 적용 가능합니다.
r1
565
r3
566 {{{#red '''주의'''}}}: HTML 문법 안에 먼지위키 문법을 같이 쓸 수 없습니다. '''ex)''' {{{#!html <span style="color: #FFFFFF; background-color: #009900">'''볼드체'''</span>}}}
567
568 같이 쓰려면 {{{#!html <b><span style="color: #FFFFFF; background-color: #009900">볼드체</span></b>}}}
569 ||{{{{{{#!html <b><span style="color: #FFFFFF; background-color: #009900">볼드체</span></b>}}}}}}||
570 이와 같이 {{{<b>}}}태그를 사용해야 합니다. 태그는 {{{{{{#!html <태그>}}}}}}와 같이 사용해야 합니다.
571
572 ||<-5> HTML 태그 ||
573 || 시작 || 종료 || 예시 || 설명 || 대체 가능 문법 ||
574 || <b> || </b> || {{{#!html <b>가나</b>다라}}} ||볼드체: 글자를 굵게 합니다. || {{{'''가나'''다라}}} ||
575 || <i> || </i> || {{{#!html <i>가나</i>다라}}} ||이탤릭체: 글자를 기울게 합니다. || {{{''가나''다라}}} ||
576 || <strong> || </strong> || {{{#!html <strong>가나</strong>다라}}} ||글자를 강조합니다.[* <b> 태그랑 차이 없음.] || {{{'''가나'''다라}}} ||
577 || <em> || </em> || {{{#!html <em>가나</em>다라}}} ||글자를 기울입니다.[* <i> 태그랑 차이 없음.] || {{{''가나''다라}}} ||
578 || <s> || </s> || {{{#!html <s>가나</s>다라}}} ||글자에 취소선을 추가합니다.[* 이상한 것을 느꼈을텐데, 먼지위키에서 제공하는 문법인 --취소선--을 쓰면 마우스를 올렸을 때 취소선이 사라지고 회색 글자만 보이지만, 이 태그는 글자 자체에 취소선을 입히는 것이다. 그러니 --취소선--가리기를 사용해도 이 html태그를 이용한 취소선은 사라지지 않는다.] || {{{--가나--다라}}} ||
579 || <sub> || </sub> || {{{#!html <sub>가나</sub>다라}}} ||아래 첨자를 정의합니다. || {{{,,가나,,다라}}} ||
580 || <sup> || </sup> || {{{#!html <sup>가나</sup>다라}}} ||위 첨자를 정의합니다. || {{{^^가나^^다라}}} ||
581 이 외에도 다양한 태그가 있습니다.
582
583 아니면은 괄호 밖에서 사용해야 합니다. '''{{{#!html <span style="color: #FFFFFF; background-color: #009900">볼드체</span>}}}'''
584 ||{{{'''{{{#!html <span style="color: #FFFFFF; background-color: #009900">볼드체</span>}}}'''}}}||
585
586 {{{#red '''주의'''}}}: 문서 목차에는 HTML 문법이 적용되지 않습니다.
587
588 === 텍스트 그림자 및 네온 효과 ===
589 {{{ {{{#!html <span style="text-shadow: 가로움직임px 세로움직임px 번짐정도px #그림자색; color:#글자색">서술할 내용</span>}}} }}}
590 먼지위키에서는 px 단위의 값이 0이 아닐 때 항상 px를 써주어야 정상 표시됩니다. 표나 이미지의 크기를 정할 때와 같이, px를 생략하면 자동으로 픽셀 단위로 맞추어 주지는 않음에 주의해야 합니다.
591 글자색을 그대로 쓸 생각이면 {{{; color:#글자색}}}부분을 제외하면 됩니다. 아래 표의 예시는 비교를 위하여 원본과 3배본을 함께 서술하였습니다.
592 ||{{{{{{#!html <span style="text-shadow: 3px 3px 0px #999">그림자 효과</span>}}}}}}
593 번짐이 없으면 그림자 효과가 됩니다.
594 ||<bgcolor=#ffffff> {{{#!html <span style="text-shadow: 3px 3px 0px #999">그림자 효과</span>}}} {{{#!html <span style="text-shadow: 3px 3px 0px #999; font-weight:700; font-size:300%">그림자 효과</span>}}} ||
595 ||{{{{{{#!html <span style="text-shadow: 0 0 6px #2BB; color:#066">네온 효과</span>}}}}}}
596 번짐 옵션을 6px 주어서 네온 사인 같은 효과를 얻습니다.
597 ||<bgcolor=#ffffff> {{{#!html <span style="text-shadow: 0 0 6px #2BB; color:#066">네온 효과</span>}}} {{{#!html <span style="text-shadow: 0 0 6px #2BB; color:#066; font-weight:700; font-size:300%">네온 효과</span>}}} ||
598 ||{{{{{{#!html <span style="text-shadow: 3px 3px 0px yellow, 6px 6px 9px #DA2; color:black">다중 효과</span>}}}}}}
599 그림자 + 번진 그림자(쉼표로 다중 적용)로 큰 글씨에서 진한 네온 효과
600 ||<bgcolor=#999999> {{{#!html <span style="text-shadow: 3px 3px 0px yellow, 6px 6px 9px #DA2">다중 효과</span>}}} {{{#!html <span style="text-shadow: 3px 3px 0px yellow, 6px 6px 9px #DA2; color:black; font-weight:700; font-size:300%">다중 효과</span>}}} ||
601
602 ==== 텍스트 외곽선 효과 ====
603 {{{ {{{#!html <span style="text-shadow: 외곽선두께px 0px #외곽선색, 0px 외곽선두께px #외곽선색, -외곽선두께px 0px #외곽선색, 0px -외곽선두께px #외곽선색, 외곽선두께px 외곽선두께px #외곽선색, 외곽선두께px -외곽선두께px #외곽선색, -외곽선두께px -외곽선두께px #외곽선색, -외곽선두께px 외곽선두께px #외곽선색; color:#글자색">서술할 내용</span>}}} }}}
604 먼지위키에서는 px 단위의 값이 0이 아닐 때 항상 px를 써주어야 정상 표시됩니다. 표나 이미지의 크기를 정할 때와 같이, px를 생략하면 자동으로 픽셀 단위로 맞추어 주지는 않음에 주의해야 합니다.
605 글자색을 그대로 쓸 생각이면 ; color:#글자색부분을 제외하면 됩니다. 아래 표의 예시는 비교를 위하여 원본과 3배본을 함께 서술하였습니다.
606
607 위의 그림자 효과를 응용한 방식입니다.
608 상, 하, 좌, 우, 좌상, 우상, 좌하, 우하의 8방으로 그림자를 모두 적용한 방식으로 외곽선처럼 표시됩니다.
609 이 중 상, 하, 좌, 우의 그림자 효과만 적용할 경우 픽셀 폰트처럼 외곽선이 표시됩니다.
610
611 || {{{ {{{#!html <span style="text-shadow: 1px 0px #fff, 0px 1px #fff, -1px 0px #fff, 0px -1px #fff, 1px 1px #fff, 1px -1px #fff, -1px -1px #fff, -1px 1px #fff; color:#11A048">외곽선 효과1</span>}}} }}} ||<bgcolor=#999> {{{#!html <span style="text-shadow: 1px 0px #fff, 0px 1px #fff, -1px 0px #fff, 0px -1px #fff, 1px 1px #fff, 1px -1px #fff, -1px -1px #fff, -1px 1px #fff; color:#11A048">외곽선 효과1</span>}}} {{{#!html <span style="text-shadow: 3px 0px #fff, 0px 3px #fff, -3px 0px #fff, 0px -3px #fff, 3px 3px #fff, 3px -3px #fff, -3px -3px #fff, -3px 3px #fff; color:#11A048; font-weight:700; font-size:300%">외곽선 효과1</span>}}} ||
612 || {{{ {{{#!html <span style="text-shadow: 1px 0px #fff, 0px 1px #fff, -1px 0px #fff, 0px -1px #fff; color:#11A048">외곽선 효과2</span>}}} }}} ||<bgcolor=#999> {{{#!html <span style="text-shadow: 1px 0px #fff, 0px 1px #fff, -1px 0px #fff, 0px -1px #fff; color:#11A048">외곽선 효과2</span>}}} {{{#!html <span style="text-shadow: 3px 0px #fff, 0px 3px #fff, -3px 0px #fff, 0px -3px #fff; color:#11A048; font-weight:700; font-size:300%">외곽선 효과2</span>}}} ||
613
614 == [anchor(동영상)]HTML 문법을 이용한 비디오 삽입 ==
615 [[먼지위키:문법 도움말#동영상|매크로가 지원되지 않는]] 사이트의 동영상을 먼지위키 문서 내에 첨부하고 싶다면, HTML5를 이용해야 합니다. 단, 이는 후술하고 있듯이 '''{{{#red 차후 지원이 중단될 수 있는 비권장 문법 입니다.}}}'''
616
617 '''{{{#red 주의}}}''': 소리를 포함하고 있는 멀티미디어의 자동 재생(autoplay)은 금지되어 있습니다.
618
619 {{{방법 1.
620 {{{#!html <video src="동영상 주소"></video>}}}
621
622 방법 2.
623 {{{#!html 동영상 플레이어 소스}}}
624 }}}
625 위와 같은 형식으로 문서 내의 원하는 위치에 쓰시면 됩니다. 문서 내에 쓰고 문서 저장을 하면 영상이 출력됩니다.
626
627 * 모든 페이지에서의 TLS(HTTPS) 통신을 지원하지 않는 사이트의 동영상 플레이어는 먼지위키에서 나타나지 않습니다. [[https://namu.wiki/w/먼지위키:보존문서/먼지위키:연습장1?rev=1262|참고]] [[https://namu.wiki/raw/먼지위키:보존문서/먼지위키:연습장1?rev=1262|RAW]][* 2016년 7월 27일 확인]
628
629 == 기타 ==
630 * class 속성을 span 태그를 통해 삽입할 수 있습니다. div, a 등 다른 태그에서는 지원하지 않습니다.
631 {{{#!syntax xml
632 <span class="클래스명">...</span>
633 <span class="클래스명1 클래스명2 클래스명3...">...</span>
634 }}}
635 class 속성에 공백이 없을 경우 큰따옴표를 사용하지 않아도 작동하지만 이는 비권장 사항입니다.
r1
636 == 틀 ==
637 === 기본 문법 ===
638 {{{{{{#!wiki style="border:1px solid #E0E0E0;border-left:3px solid orange;padding:12px;box-shadow:3px 3px 10px #B3B3B3;margin-right:10px;"
639 {{{+1 여기에 제목을 넣어 주세요.}}}[br][br]여기에 내용을 넣어 주세요.}}}}}}
640 {{{#!wiki style="border:1px solid #E0E0E0;border-left:3px solid orange;padding:12px;box-shadow:3px 3px 10px #B3B3B3;margin-right:10px;"
641 {{{+1 여기에 제목을 넣어 주세요.}}}[br][br]여기에 내용을 넣어 주세요.}}}
642 * {{{#!wiki style="border:1px solid #E0E0E0;border-left:3px solid (색 코드);padding:12px;box-shadow:3px 3px 10px #B3B3B3;margin-right:10px;"[br]테두리를 지정합니다. (색 코드) 부분에 원하는 색깔의 코드를 넣어 주면 됩니다. 아래는 많이 쓰이는 코드들입니다. 또한 blue, red 같이 CSS 웹 색상 이름을 사용해도 됩니다. 틀을 만들 때 글자를 1개라도 틀리거나 빠트리면 틀이 정상적으로 표시되지 않습니다.
643 * '''{{{#orange orange}}}'''[br]가장 일반적인 색으로, 주의 문구에 주로 쓰입니다. 예: [[틀:회원 수정]]
644 * '''{{{#crimson crimson}}}'''[br]orange보다 조금 더 강한 경고에 주로 쓰입니다. 예: [[틀:문서 기여자 수정]]
645 * '''{{{#black black}}}'''[br]crimson보다 조금 더 강한 경고에 주로 쓰입니다. 예: [[틀:관리자 수정]]
646 * '''{{{#navy navy}}}'''[br]black보다도 더 강한 경고에 주로 쓰입니다. 예: [[틀:불법]]
647 * '''{{{#gray gray}}}'''[br]폐지, 부재 등 무언가가 없다는 의미에 주로 쓰입니다. 예: [[틀:폐선]]
648 * '''{{{#yellowgreen yellowgreen}}}, {{{#green green}}}'''[br]편집상의 주의 문구에 주로 쓰입니다. 예: [[틀:토론 합의]]
649 * '''{{{#0b0b0b #0b0b0b}}}'''[br]먼지위키의 공식 문서 등에 주로 쓰입니다. 예: [[틀:먼지위키 도움말]] 또는 [[틀:먼지위키]]
650 * [[#s-4.2|텍스트 크기 문법]]을 이용하여 제목 크기 조절이 가능합니다. {{{{{{+1 여기에 제목을 넣어 주세요.}}}}}} 처럼 사용할 수 있습니다.
651 * 제목과 내용 사이에 한 줄을 띄워 주세요. {{{[br][br]}}} 처럼 줄 바꿈 매크로를 두 번 사용하면 됩니다.
652
653 ==== 색상줄(border) 위로 ====
654 다음과 같은 형식으로 border을 위로 올려놓을 수 있습니다. 앏은 틀에 사용하기에 유용합니다.
655 {{{{{{#!wiki style="border:1px solid #E0E0E0;border-top:3px solid orange;padding:12px;box-shadow:3px 3px 10px #B3B3B3;margin-right:10px;"
656 {{{+1 여기에 제목을 넣어 주세요.}}}[br][br]여기에 내용을 넣어 주세요.}}}}}}
657 {{{#!wiki style="border:1px solid #E0E0E0;border-top:3px solid orange;padding:12px;box-shadow:3px 3px 10px #B3B3B3;margin-right:10px;"
658 {{{+1 여기에 제목을 넣어 주세요.}}}[br][br]여기에 내용을 넣어 주세요.}}}
659
r3
660 ==== 먼지위키 방식 ====
r1
661 * 제목 및 내용
662 {{{{{{#!wiki style="border:1px solid gray;border-top:5px solid orange;padding:12px;"
663 {{{+1 여기에 제목을 넣어 주세요.}}}[br][br]여기에 내용을 넣어 주세요.}}}}}}
664 {{{#!wiki style="border:1px solid gray;border-top:5px solid orange;padding:12px;"
665 {{{+1 여기에 제목을 넣어 주세요.}}}[br][br]여기에 내용을 넣어 주세요.}}}
666
667 * 제목만
668 * 방법 1[* 일반적인 방식입니다.]
669 {{{{{{#!wiki style="border:1px solid gray;border-top:5px solid orange;padding:12px;"
670 {{{+1 여기에 제목을 넣어주세요.}}}}}}}}}
671 {{{#!wiki style="border:1px solid gray;border-top:5px solid orange;padding:12px;"
672 {{{+1 여기에 제목을 넣어주세요.}}}}}}
673 * 방법 2[* 특수 권한 틀에서 사용하는 방식]
674 {{{{{{#!wiki style="padding: 10px; border-width: 5px 1px 1px; border-style: solid; border-color: orange gray gray;"
675 {{{+1 여기에 제목을 넣어주세요.}}}}}}}}}
676 {{{#!wiki style="padding: 10px; border-width: 5px 1px 1px; border-style: solid; border-color: orange gray gray;"
677 {{{+1 여기에 제목을 넣어주세요.}}}}}}
678
679 === 심화 문법 ===
680 {{{ {{{#!wiki style="원하는 서식"}}} }}}
681 원하는 서식에 입력할 수 있는 것들은 다음과 같습니다. 한 서식을 입력한 다음에 ''';'''([[세미콜론]])을 입력하여 다음 서식과 구분합니다. 또한 세미콜론 뒤에 공란을 입력하지 않아도 정상적인 출력이 가능합니다. 여기서 '''(수치)'''는 [[정수|정수값]]을 의미합니다. 즉, 음수값도 적용이 됩니다.
682 * 테두리: {{{border-(방향):(선 굵기)px (선 스타일) (색상)}}}
683 예1: 상우하좌 각각 5, 10, 15, 20px 굵기의 테두리
684 {{{border:1px solid; border-width:5px 10px 15px 20px}}}
685 예2: 전방향 1px이지만 윗부분은 5px
686 {{{border:1px solid; border-top:5px solid}}}
687 * 방향: top=위, bottom=아래, right=오른쪽, left=왼쪽, 공백=전방향.
688 * 선 굵기: {{{thin, medium, thick}}} = 각각 1, 3, 5px, 또는 직접 입력 XXpx(반드시 px를 붙일 것)
689 * 선 스타일
690 ||{{{#!wiki style="padding:2px;margin:2px;float:left;width:100; border:4px none blue"
691 {{{none}}}}}}{{{#!wiki style="padding:2px;margin:2px;float:left;width:100; border:4px solid blue"
692 {{{solid}}}}}}{{{#!wiki style="padding:2px;margin:2px;float:left;width:100; border:4px double blue"
693 {{{double}}}}}}{{{#!wiki style="padding:2px;margin:2px;float:left;width:100; border:4px dotted blue"
694 {{{dotted}}}}}}{{{#!wiki style="padding:2px;margin:2px;float:left;width:100; border:4px dashed blue"
695 {{{dashed}}}}}}{{{#!wiki style="padding:2px;margin:2px;float:left;width:100; border:4px inset blue"
696 {{{inset}}}}}}{{{#!wiki style="padding:2px;margin:2px;float:left;width:100; border:4px outset blue"
697 {{{outset}}}}}}{{{#!wiki style="padding:2px;margin:2px;float:left;width:100; border:4px groove blue"
698 {{{groove}}}}}}{{{#!wiki style="padding:2px;margin:2px;float:left;width:100; border:4px ridge blue"
699 {{{ridge}}}}}}||
700 * 선 색상: 디폴트 색상은 먼지위키 기본 글씨 색인 {{{#373A3C}}}
701 * 배경 색: {{{background-color:(색상)}}}
702 * 둥근 모서리: {{{border-radius:(수치)px}}}
703 {{{#!wiki style=""
704 예시
705 {{{#!wiki style="display:inline-block; width:45%; padding:5px 10px; margin:3px; border:2px solid blue; border-radius:10px"
706 {{{border-radius:10px}}} :[br]모든 방향 10px}}}{{{#!wiki style="display:inline-block; width:45%; padding:5px 10px; margin:3px; border:2px solid blue; border-radius:10px 20px"
707 {{{border-radius:10px 20px}}} :[br]좌상, 우하는 10px, 우상, 좌하는 20px}}}{{{#!wiki style="display:inline-block; width:45%; padding:5px 10px; margin:3px; border:2px solid blue; border-radius:5px 10px 20px"
708 {{{border-radius:5px 10px 20px}}} :[br]좌상부터 시계방향으로 5px 10px 20px (좌하는 기본 5px)}}}{{{#!wiki style="display:inline-block; width:45%; padding:5px 10px; margin:3px; border:2px solid blue; border-radius:5px 10px 20px 40px"
709 {{{border-radius:5px 10px 20px 40px}}} :[br]좌상부터 시계방향으로 5px 10px 20px 40px}}}
710 }}}
711 * 틀 안의 여백: {{{padding-(방향):(수치)px}}}
712 기본값은 {{{padding:0px}}}
713
714 * 틀 밖의 여백: {{{margin-(방향):(수치)px}}} 또는 {{{margin:(북쪽&남쪽 공통 적용 수치)px (동쪽&서쪽 공통 적용 수치)px}}} 또는 {{{margin:(북쪽 수치)px (동쪽 수치)px (남쪽 수치)px (서쪽 수치)px}}}}
715 기본값은 {{{margin:0px}}}
716 {{{margin:0px auto}}}로 주었을 경우 표 밖의 가로 여백을 자동으로 맞춥니다. 즉, 표의 화면 가운데 정렬이 됩니다.
717 이 방법을 사용하면 표의 셀 내부에 이미지를 삽입할 때 여백을 없애는 것이 가능하며 양수값을 사용하면 여백이 추가되며, 음수 값을 사용할 경우 여백이 줄어듭니다.
718 ||<colbgcolor=#fc6><colcolor=#000> 문법 ||<^|1>문법 미사용[br]{{{||<tan>[[파일:먼지위키 로고2.png]]||
719 }}}||<^|1>문법 사용[br]{{{||<tan>{{{#!wiki style="margin:-5px -10px"
720 [[파일:먼지위키 로고2.png]]}}}||}}}||
721 || 출력 ||{{{#!wiki style=""
722 ||<tan>[[파일:먼지위키 로고2.png|width=80]]||}}}||{{{#!wiki style="float:left"
723 ||<tan>{{{#!wiki style="margin:-5px -10px -5px -10px"
724 [[파일:먼지위키 로고2.png|width=80]]}}}||}}}||
725 만약 margin이 접기나 표 밖으로 나오면 잘립니다.[* 원래는 그냥 튀어 나왔으나, 2019년 10월 말 경부터 변경.]
726
727 * 틀 높이: {{{height:(수치)px}}}
728
729 * 틀 길이: {{{width:(수치)px 또는 (수치)%}}}: %의 기준은 화면의 너비.
730
731 * 틀 최대 길이: {{{max-width:(수치)px 또는 (수치)%}}}: %의 기준은 화면의 너비.
732
733 * 폰트 색: {{{color:(색상)}}}
734
735 * 폰트 효과: {{{font-style: normal 또는 italic 또는 oblique}}}
736
737 * 글자 크기: {{{font-size: (수치)pt나 (수치)em 등.}}}[* 글자 크기를 세밀하게 조정. {\{{+? }}\}나 {\{{-? }}\}과는 별개의 수치로 지정되며 소숫점도 가능하다. 사용 가능이 확인된 단위는 pt, em이 있으나 더 있는지 확인 바람.]
738
739 * 글자 위치: {{{text-align: left 또는 center 또는 right}}}
740
741 * 표의 좌, 우 정렬: {{{float:left 또는 right 또는 center}}}
742 먼지위키 이미지, 표의 정렬과 비슷하나 center의 경우 별도의 설정 없이는 표의 폭이 100%로 고정됩니다.
743 float 기능을 사용하여 [[#s-17.3.3|표의 캡션]] 기능과 비슷하게 이미지에도 캡션을 넣을 수 있습니다. 먼지위키에는 이미지 캡션 기능이 없으므로 이렇게 써야 합니다.
744 ||<colbgcolor=#fc6><colcolor=#000>예시[br]문법||{{{{{{#!wiki style="float:left;text-align:center"
745 [[파일:먼지위키 로고2.png|width=200]][br]먼지위키 로고}}}}}}||{{{{{{#!wiki style="float:left;text-align:center"
746 먼지위키 로고[br][[파일:먼지위키 로고2.png|width=200]]}}}}}}||
747 ||예시[br]출력||{{{#!wiki style="float:left;text-align:center"
748 [[파일:먼지위키 로고2.png|width=200]][br]먼지위키 로고}}}||{{{#!wiki style="float:left;text-align:center"
749 먼지위키 로고[br][[파일:먼지위키 로고2.png|width=200]]}}}||
750 * {{{display}}} 속성: 표가 화면에서 어떻게 표시될지를 정합니다. 속성을 주지 않을 경우 기본값은 {{{block}}}입니다. 줄글 같이 취급하는 {{{inline}}}, 표로 취급하는 {{{table}}}, 안 보이게 하는 {{{none}}} 등이 있습니다. 더 자세한 사항은 [[https://www.w3schools.com/cssref/pr_class_display.asp|링크 참조]]
751 기본값인 block의 경우 강제로 표 너비의 최소를 화면의 100%로 맞춥니다. table 등으로 값을 줄 경우 이를 막을 수 있습니다.
752 ||<table width=100%><width=50%>display 속성을 주지 않을 경우
753 (기본인 {{{display:block}}}이 됨)
754 {{{#!wiki style="border:1px solid gray;border-top:5px solid orange"
755 [[파일:먼지위키 로고2.png|width=200]]}}}||<width=50%>display 속성을 {{{display:table}}}로 준 경우
756 {{{#!wiki style="border:1px solid gray;border-top:5px solid orange;display:table"
757 [[파일:먼지위키 로고2.png|width=200]]}}}||
758 [clearfix]
759
760 == 문법 강조 (syntax highlighting) ==
761 기본적인 사용법은 다음과 같습니다.
762 {{{{{{#!syntax 언어명
763
764
765 }}}}}}
766 프로그래밍 언어를 입력할 때, [[텍스트 에디터]]에 입력한 것처럼 보기 좋게 해줍니다.
767 프로그래밍 언어의 이름과 코드 내용을 원하는 것으로 변경하여 사용하실 수 있습니다.
768
769 '언어명' 부분에 해당 언어 명칭을 아래와 같이 알파벳 소문자 형태로 작성하신 후 코드를 입력하시면 됩니다. 아래에 언급된 언어만 사용 가능합니다.
770 [[C++]] - cpp
771 [[C\#]] - csharp
772 [[CSS]] - css
773 [[Go(프로그래밍 언어)|Go]] - go
774 [[Java]] - java
775 [[JavaScript]] - javascript
776 [[JSON]] - json
777 [[markdown]] - markdown
778 [[Objective-C]] - objectivec
779 [[Perl]] - perl
780 [[PHP]] - php
781 [[Python]] - python
782 [[Ruby]] - ruby
783 [[SQL]] - sql
784 [[TypeScript]] - typescript
785 [[XML]] - xml
786 [각주][include(틀:문서 가져옴/알파위키, title=알파위키:문법 도움말/심화, version=15)]